<template>
    <div class="historyPlay">
        <!-- 播放历史 -->
        <div class="top">
            <img :src="historyList[0]?.al.picUrl || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'"
                alt="">
            <div class="history-play-list-title">
                <div>历史播放</div>
                <button @click="playAllSong">播放全部 {{ total }}</button>
            </div>
        </div>
        <!-- 历史音乐列表 -->
        <MusicList :data="historyList" />
        <!-- 无数据状态 -->
        <el-empty v-if="noDataStatus" description="暂无历史记录。。。" />
        <!-- loading加载动画 -->
        <div style="position: absolute;top: 50vh;width: 100%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs } from 'vue';
import { getRecentlyMusicList } from '@/api/record';
import useCounterStore from '@/stores/counter';
import MusicList from '@/components/musicList.vue';
import { getUser } from '@/utils/auth';

const { playList, songInfo } = toRefs(useCounterStore())

const historyList = ref([] as any[])
const total = ref<number>(0)//历史记录数量
const loading = ref<boolean>(true)//加载动画
const noDataStatus = ref<boolean>(false)//无数据状态

onMounted(async () => {
    // 判断用户是否登录
    if (!getUser()) return loading.value = false
    // 获取最近音乐列表
    const { data: { allData, code } } = await getRecentlyMusicList({ uid: getUser().userId, type: 0 })    
    // 判断请求是否成功
    if (code === 200) {
        // 设置总歌曲数
        total.value = allData.length
        // 设置历史列表
        historyList.value = allData.map((item: any) => item.song)
    }
    // 将loading设置为false
    loading.value = false
})
//播放当前全部历史歌曲
const playAllSong = () => {
    playList.value = historyList.value
    songInfo.value = historyList.value[0]
}

</script>

<style lang="scss" scoped>
.historyPlay {
    width: 100%;
    height: 87%;
    color: aliceblue;
    /* border: 1px solid red; */
    overflow: auto;
    margin-top: 8%;
    position: relative;

    .top {
        display: flex;
        color: rgb(182, 198, 212);
        position: relative;
        padding: 0 3vw;
        font-size: 2vw;
        padding-bottom: 2vw;

        img {
            width: 20%;
            height: 25vh;
            border-radius: 10px;
            margin-right: 2vw;

        }
    }
}

.history-play-list-title {
    position: relative;
    div {
        font-size: 18px;
        font-weight: 700;
    }

    button {
        position: absolute;
        min-width: 10vw;
        bottom: 0;
        border: 0;
        border-radius: 4px;
        padding: 6px 26px;
        font-size: 10px;
        color: #000;
        font-weight: 700;
        cursor: pointer;
    }

}

.historyPlay::-webkit-scrollbar {
    display: none;
}
</style>